<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <div v-on:click="handle0">点击0
            <!-- .stop阻止事件冒泡 -->
            <button v-on:click.stop="handle1">点击1</button>
        </div>
        <div>
            <!-- .prevent阻止事件的默认行为，后面的方法可以不要 -->
            <a v-on:click.prevent="handle2" href="http://www.baidu.com">点击链接1</a>
        </div>
        <div>
            <!-- 修饰符串联，即阻止冒泡，也阻止默认行为 -->
            <a v-on:click.stop.prevent="handle3" href="http://www.baidu.com">点击链接2</a>
        </div>
        <div>
            <!-- 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的 -->
            <div v-on:click.self="handle4">仅自身点击有效
                <button v-on:click="handle5">点击2</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle0: function () {
                    this.num++;
                },
                handle1: function (event) {
                    // 原始方法：阻止事件冒泡
                    // event.stopPropagation();
                },
                handle2: function (event) {
                    console.log('阻止默认行为');
                    // 原始方法：阻止默认行为
                    // event.preventDefault();
                },
                handle3: function (event) {
                    // 
                },
                handle4: function (event) {
                    this.num++;
                },
                handle5: function (event) {
                    // this.num++;
                }
            }
        });
    </script>
</body>

</html>